<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }} -- {{ item.age }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
import { withDefaults } from "vue";
import {type Persons } from "@/types";

// 接受a
// defineProps(['a'])
//  console.log(a)  // 报错，分不清是window还是传过来的

// 接收a，并保存a
// let x = defineProps(['a','list'])
// console.log(x.a)
// console.log(x)

// 接受a和list
// defineProps(['a','list'])

// 接受并限制
// defineProps<{a:string,list:Persons}>()

// 接受并限制+限制必要性和默认值
withDefaults(defineProps<{a:string,list?:Persons}>(),{
  a:'我哈哈',
  list:()=> [
    {  id: "a44da343ffd",
  name: "张三23324",
  age: 23,}
  ]
})
</script>

<style scoped>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>
